<template>
    <div>
        <div style="margin: 5px;padding: 5px;">
            <el-table  :header-cell-style="{background:'#67C23A',color:'white',fontSize:'15px'}" :data="data" v-loading="loading" size="mini" border highlight-current-row>
                <el-table-column prop="examName" label="试卷名称" align="center"></el-table-column>
                <el-table-column prop="examTime" label="考试时间" align="center">
                    <template slot-scope="scope">
                        {{$YEAR_MONTH_DAY_HOURS_MINUTES_SECONDS(scope.row.examTime)}}
                    </template>
                </el-table-column>
                <el-table-column prop="examTimeLength" label="考试时长" align="center"></el-table-column>
                <el-table-column prop="examType" label="试卷类型" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.examType == '1' ? 'success': (scope.row.examType == '2' ? 'warning':'danger')">
                            {{scope.row.examType == '1' ? '日测':(scope.row.examType == '2' ? '周测' : '月考')}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="examStatus" label="试卷状态" align="center">
                    <template slot-scope="scope">
                        <el-tag style="width: 100%;height: 100%;"
                                :type="scope.row.examStatus == '1' ?
                                    'info':(scope.row.examStatus == '2' ?
                                    'primary':(scope.row.examStatus == '3' ?
                                    'warning' : (scope.row.examStatus == '4' ?
                                    'danger' : (scope.row.examStatus == '5' ? 'success' : 'info' )))) ">

                            {{scope.row.examStatus == '1' ?
                            '未开始':(scope.row.examStatus == '2' ?
                            '进行中':(scope.row.examStatus == '3' ?
                            '有批阅，无补考' : (scope.row.examStatus == '4' ?
                            '有批阅，且补考' : (scope.row.examStatus == '5' ?
                            '无批阅，且补考' : '结束' )))) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column width="600px" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button  size="mini" type="success" @click="startExam('studentExamShow',scope.row)" icon="el-icon-document-checked">开始考试</el-button>
                        <el-button size="mini" type="primary" plain icon="el-icon-data-line" :disabled="scope.row.examStatus != '6'" @click="analysisExam(scope.row)">成绩分析</el-button>
                        <el-button size="mini" type="warning" plain icon="el-icon-view" :disabled="scope.row.examStatus != '6'" @click="showExam(scope.row)">查看试卷</el-button>
                        <el-button size="mini" type="danger" plain @click="openUploadWindow(scope.row)" icon="el-icon-upload" :disabled="scope.row.examStatus == '1' || scope.row.examStatus == '5' || scope.row.examStatus == '6'">上传上机题</el-button>
                        <el-button size="mini" type="info" plain @click="supplementaryExam(scope.row)" icon="el-icon-money" :disabled="scope.row.examStatus == '1' || scope.row.examStatus == '2' || scope.row.examStatus == '3' || scope.row.examStatus == '6'">补考</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div style="margin: 5px;padding: 5px;text-align:center">
            <el-pagination
                    layout="total,prev,pager,next"
                    :total="params.total"
                    :page-size="params.size"
                    :current-page="params.page"
                    :hide-on-single-page="false"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"></el-pagination>
        </div>

        <student-exam-show ref="studentExamShow"></student-exam-show>
        <student-exam-analysis ref="studentExamAnalysis"></student-exam-analysis>
        <student-exam-result ref="studentExamResult"></student-exam-result>
        <student-exam-upload ref="studentExamUpload"></student-exam-upload>
        <student-exam-supplementary ref="studentExamSupplementary"></student-exam-supplementary>
    </div>
</template>

<script>

    import { getList ,getScoreStatus,getShowExamStatus,checkUpperResult,getExamTypeAndStudentScore,updateScoreStatus } from '@/api/student/student-exam'


    export default {
        name: "student-exam-index",
        components:{
            StudentExamShow:()=>import("@/views/student/student-exam-show.vue"),
            StudentExamAnalysis:()=>import("@/views/student/student-exam-analysis.vue"),
            StudentExamResult:()=>import("@/views/student/student-exam-result.vue"),
            StudentExamUpload:()=>import("@/views/student/student-exam-upload.vue"),
            StudentExamSupplementary:()=>import("@/views/student/student-exam-supplementary.vue")
        },
        data(){
            return {
                data:[],
                loading:true,
                params:{page:1,size:10,total:0},
                currentRow: null,
                fileList:[]
            }
        },
        methods:{
            handleSizeChange(val){
                this.params.size = val;
                this.getList(this.params);
            },
                handlePageChange(val){
                this.params.page = val;
                this.getList(this.params);
            },
            getList(data){
                getList(data).then(res=>{
                    if(res.data.success){
                        this.data = res.data.data.rows;
                        this.params.total = res.data.data.total;
                        this.loading = false;
                    }
                });
            },
            startExam(name,data){ //开始考试 studentExamShow
                if(data.examStatus != '2'){
                    this.$message.error("目前阶段无法开始考试");
                    return false;
                }

                getScoreStatus({id:data.id}).then(res=>{
                    if(res.data.success){
                        this.$refs[name].examData = {};
                        this.$refs[name].parentData = data;
                        this.$refs[name].value = true;
                    }else{
                        this.$message.error(res.data.message);
                        return false;
                    }
                })
            },
            analysisExam(data){
                if(data.examStatus != '6'){
                    this.$message.error("目前阶段无法查看");
                    return false;
                }

                this.$refs['studentExamAnalysis'].parentData = data;
                this.$refs['studentExamAnalysis'].value = true;
            },
            showExam(data){
                if(data.examStatus != '6'){
                    this.$message.error("目前阶段无法查看");
                    return false;
                }

                //阻止非法操作: 后台接口查询:当前登录人的score是否为2,试卷状态是否为4  如果不是则不允许查看
                getShowExamStatus({id:data.id}).then(res=>{
                    if(!res.data.success){
                        this.$message.error("非法操作");
                        this.getList(this.params);
                        return false;
                    }else{
                        this.$refs['studentExamResult'].data = {};
                        this.$refs['studentExamResult'].parentData = data;
                        this.$refs['studentExamResult'].value = true;
                    }
                });
            },
            openUploadWindow(data){
                checkUpperResult(data).then(res=>{
                    if(!res.data.success){
                        this.$message.error("无法操作");
                        return false;
                    }else{
                        this.$refs['studentExamUpload'].parentData = data;
                        this.$refs['studentExamUpload'].value = true;
                    }
                });
            },
            supplementaryExam(data){
                getExamTypeAndStudentScore(data).then(res=>{
                    if(res.data.success){ //可以进行补考
                        updateScoreStatus({id:data.id}).then(res=>{
                            if(res.data.success){
                                this.$refs['studentExamSupplementary'].data = {};
                                this.$refs['studentExamSupplementary'].parentData = data;
                                this.$refs['studentExamSupplementary'].value = true;
                            }else{
                                this.$message.error(res.data.message);
                                return false;
                            }
                        });
                    }else{
                        this.$message.error({message:'考试不在需补考行列 或 你已提交了试卷',center:true});
                        return  false;
                    }
                });
            }
        },
        created() {
            this.getList(this.params);
        }
    }
</script>

<style scoped>

</style>